﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <canvas id="mycanvas" style="border: 1px solid black; cursor: default; text-align: center;" width="800" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
    function Engine(fps) {
        this._fps = 0;
        this._fpsCounter = 0;
        this._fpsTick = 0;
        this._lastTick = 0;
        this._intervalTick = 20;
        this.FPS = fps;
        this.delay = 1000 / fps;

        this._idi = null;
        this._gdi = null;

        this._width = 0;
        this._height = 0;

        this._action = null;
        this._mAction = null;

        this.init = function (el, width, height) {
            var that = this;

            this._canvas = el;
            this._context = this._canvas.getContext("2d");
            this._width = width;
            this._height = height;

            this._canvas.style.width = width;
            this._canvas.style.height = height;

            this._gdi = new Draw(this);
            this._idi = new MouseEvent(this);

            setInterval(this.onTick, 10);
        }


        this.onRender = function () {
            var tick = Date.now();
            if (tick - this._lastTick > this._intervalTick) {
                this._fpsCounter = parseInt(this._fpsCounter) + 1;
                this._lastTick = tick;
                if (this._lastTick - this._fpsTick > 10) {
                    this._fps = this._fpsCounter;
                    this._fpsCounter = 0;
                    this._fpsTick = this._lastTick;
                }
            }
            this._context.fillStyle = 'gray';
            this._context.fillRect(0, 0, this._width, this._height);

            if (this._action != null) {
                this._action.loop(this);
                this._action.render(this);
            }

            if (this._mAction != null) {
                this._mAction.loop(this);
                this._mAction.render(this);
            }
            this._gdi.drawString("fps:" + this._fps, 0, 0);
        }

        this.onTick = function () {
            ag.engine.onRender();
        }

        this.MoveAction = function (action) {
            this._action = action;
        }

        this.MouseAction = function (action) {
            this._mAction = action;
        }
    }

    function Draw(engine) {
        this._context = engine._context;

        this.draw = function (image, destX, destY, destW, destH, srcX, srcY, srcW, srcH) {
            if (image == null) {
                return;
            }

            if (arguments.length == 3) {
                this._context.drawImage(image, destX, destY);
            }
            else if (arguments.length == 5) {
                this._context.drawImage(image, destX, destY, destW, destH);
            }
            else if (arguments.length == 9) {
                this._context.drawImage(image, srcX, srcY, srcW, srcH, destX, destY, destW, destH);
            }
        }

        this.drawString = function (text, x, y) {
            this._context.fillStyle = '#FFF';
            //this._context.font = "italic 30px sans-serif";
            this._context.textBaseline = 'top'
            this._context.fillText(text, x, y);
        }

        this.drawDiamond = function (x, y, w, h) {
            this._context.strokeStyle = '#00cc00';
            this._context.moveTo(x + w / 2, y);
            this._context.lineTo(x + w, y + h / 2);
            this._context.lineTo(x + w / 2, y + h);
            this._context.lineTo(x, y + h / 2);
            this._context.lineTo(x + w / 2, y);
            this._context.stroke();
        }
    }

    function MouseEvent(engine) {
        this._mouse = new MouseState();

        this.regEvent = function (engine) {
            var that = this;
            engine._canvas.addEventListener("mousedown", function (e) {
                that._mouse._x = e.layerX;
                that._mouse._y = e.layerY;
                that._mouse.setLBDown(1);
            });
            engine._canvas.addEventListener("mousemove", function (e) {
                that._mouse._x = e.layerX;
                that._mouse._y = e.layerY;
            });
            engine._canvas.addEventListener("mouseup", function (e) {
                that._mouse._x = e.layerX;
                that._mouse._y = e.layerY;
                that._mouse.setLBDown(0);
            });
        }

        this.regEvent(engine);
    }

    function MouseState() {
        this._x = 0;
        this._y = 0;
        this._buttons = [0, 0];

        this.isLBDown = function () {
            if (this._buttons[0] == 1) {
                return true;
            }
            return false;
        }

        this.isRBDown = function () {
            if (this._buttons[1] == 1) {
                return true;
            }
            return false;
        }

        this.setLBDown = function (state) {
            this._buttons[0] = state;
        }

        this.setRBDown = function (state) {
            this._buttons[1] = state;
        }
    }

    function Action() {
        this.x = 10;
        this.y = 10;
        this.t = new Date().getMilliseconds();
        this.lastupdated = 0;

        this.v = 0;

        this.render = function (engine) {
            var _t = new Date();
            var _delay = engine.delay;
            if (_t - this.lastupdated > _delay) {
               this.v = ((this.x * this.x) / (100 - this.x)).toFixed(0);

                this.v = parseInt(this.v);

                this.x = this.v * _delay;
                engine._gdi.drawDiamond(this.x, this.y, 50, 50);
                this.lastupdated = _t;
            }
            //engine._gdi.drawDiamond(this.x + 20, this.y + 50, 50, 50);
        }

        this.loop = function (engine) {

        }
    }

    function MouseScreen() {
        this.init = function (engine) {
        }

        this.render = function (engine) {
            engine._gdi.drawString("x:" + engine._idi._mouse._x + ",y:" + engine._idi._mouse._y, 100, 0);
            if (engine._idi._mouse.isLBDown()) {
                engine._gdi.drawString('鼠标左键已经按下', 200, 0);
            } else {
                engine._gdi.drawString('鼠标左键已经弹开', 200, 0);
            }
        }

        this.loop = function (engine) {

        }
    }


    var ag = { version: '1.0' };
    window.onload = function () {
        ag.engine = new Engine(20);
        ag.engine.init(document.getElementById("mycanvas"), 640, 480)
        ag.engine.MoveAction(new Action());
        ag.engine.MouseAction(new MouseScreen());
    }

</script>
